<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>天地图-墨卡托</title>

    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/openlayers/4.2.0/ol.css" rel="stylesheet">
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
<div id="map" style="width: 100%;height:100%"></div>

<script src="http://cdn.bootcss.com/openlayers/4.2.0/ol.js"></script>
<script type="text/javascript" src="../../dist/iclient9-openlayers.min.js"></script>
<script src="https://cdn.bootcss.com/fetch-jsonp/1.0.6/fetch-jsonp.min.js"></script>
<script type="text/javascript">
    var resolutions = [];
    for (var i = 0; i < 18; i++) {
        resolutions.push(78271.5169640203125 / (Math.pow(2, i)));
    }
    var map = new ol.Map({
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 0,
            resolutions: resolutions
        }),
        layers: [new ol.layer.Tile({
            source: new ol.source.Tianditu()
        }), new ol.layer.Tile({
            source: new ol.source.Tianditu({
                url: "http://t0.tianditu.com/cia_w/wmts",
                matrixSet: 'w',
                layer: 'cia'
            })
        })]
    });
</script>
</body>
</html>